<clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'lg'">
    <h3 class="modal-title">{{'APP_HOST_SPEC'|translate}}</h3>
    <div class="modal-body">
        <div *ngIf="item!=null && !loading">
            <h5>{{'APP_BASIC_INFORMATION'|translate}}</h5>
            <hr/>
            {{'APP_CPU'|translate}}:{{item.cpuCore}} <br/>
            {{'APP_HOST_MEMORY'|translate}}:{{item.memory}} <br/>
            {{'APP_OS'|translate}}:{{item.os}} {{item.osVersion}}<br/>
            <h5>{{'APP_HOST_DISK_SPEC'|translate}}</h5>
            <hr/>
            <clr-datagrid>
                <clr-dg-column>{{'APP_NAME'|translate}}</clr-dg-column>
                <clr-dg-column>{{'APP_HOST_DISK_SIZE'|translate}}</clr-dg-column>

                <clr-dg-row *clrDgItems="let volume of item.volumes" [clrDgItem]="volume">
                    <clr-dg-cell>{{volume.name}}</clr-dg-cell>
                    <clr-dg-cell>{{volume.size}}</clr-dg-cell>
                </clr-dg-row>
            </clr-datagrid>
            <br/>
                        <div *ngIf="item.hasGpu">
                            <h5>{{'APP_GPU_INFO'|translate}}</h5>
                            <hr/>
                            <clr-datagrid>
                                <clr-dg-column>{{'APP_NAME'|translate}}</clr-dg-column>
                                <clr-dg-row>
                                    <clr-dg-cell>{{item.gpuInfo}}</clr-dg-cell>
                                </clr-dg-row>
<!--                                <clr-dg-row *clrDgItems="let gpu of item.gpuNum" [clrDgItem]="gpu">-->
<!--                                    <clr-dg-cell>{{gpu.name}}</clr-dg-cell>-->
<!--                                </clr-dg-row>-->
                            </clr-datagrid>
                        </div>
            <!--            <h5>健康检查</h5>-->
            <!--            <hr/>-->
            <!--            <clr-datagrid>-->
            <!--                <clr-dg-column>原因</clr-dg-column>-->
            <!--                <clr-dg-column>采集时间</clr-dg-column>-->
            <!--                <clr-dg-column>状态</clr-dg-column>-->
            <!--                <clr-dg-column>消息</clr-dg-column>-->

            <!--                <clr-dg-row *clrDgItems="let con of host.conditions" [clrDgItem]="con">-->
            <!--                    <clr-dg-cell>{{con.reason}}</clr-dg-cell>-->
            <!--                    <clr-dg-cell>{{con.last_time}}</clr-dg-cell>-->
            <!--                    <clr-dg-cell style="text-align: center">-->
            <!--                        <i class="fa fa-check" aria-hidden="true" *ngIf="con.status"></i>-->
            <!--                        <i class="fa fa-close" aria-hidden="true" *ngIf="!con.status"></i>-->
            <!--                    </clr-dg-cell>-->
            <!--                    <clr-dg-cell>{{con.message}}</clr-dg-cell>-->
            <!--                </clr-dg-row>-->
            <!--            </clr-datagrid>-->
        </div>
        <div *ngIf="loading" style="text-align: center">
            <clr-spinner></clr-spinner>
        </div>
        <app-modal-alert></app-modal-alert>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn" (click)="onCancel()" [disabled]="loading">{{'APP_CANCEL'|translate}}</button>
        <button type="button" class="btn" (click)="onSync()" [disabled]="loading">{{'APP_REFRESH'|translate}}</button>
    </div>
</clr-modal>
